<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-02-18 13:46:43
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-02-24 10:38:34
 * @FilePath: \web-warningdevicemanage-v2\src\views\devices\allDevice\components\Schedule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div>
    <div class="container">
        <div class="LeftBox" v-show="HandleFlag === 1">
           <div class="LeftTopBox">
                 <img style="width: 22px;height: 22px;" src="~@/assets/images/schedule/rili.png" alt="">
                <span class="name">日历跳转</span>
                 <img style="width: 22px;height: 22px;" src="~@/assets/images/schedule/jintian.png" alt="">
           </div>
           <div class="LeftCenterBox" :style="{ width: '100%' }" v-if="CalendarShow">
            <Calendar class="Calendar" v-model:value="value" :fullscreen="false" >
                <template #dateCellRender="{ current }">
                    <Badge  status="error" color="#81BFFF"  v-if="GetDot(current)"/>
                    </template>
            </Calendar>
           </div>
           <ul class="ScheduleUl">
               <li v-for="item in scheduleList" :key="item.id" :class="item.id === NameRef?'CurrentSchedule': ''"
                @click="ChangeCurrent(item.id)">
                 <div class="dian" :style="{backgroundColor:
                    item.id === '-1'?'#ADD5FF':item.id === '0'?'#66E5FF':item.id === '1'?'#6BFFCE':item.id === '2'?'#FFB56B':''
                    }"></div>
                 <p :style="{color:
                    item.id === '-1'?'#ADD5FF':item.id === '0'?'#66E5FF':item.id === '1'?'#6BFFCE':item.id === '2'?'#FFB56B':''
                    }">{{ item.name }}</p>
            </li>
           </ul>
        </div>
        <div class="RightBox" :style="{width:HandleFlag === 2?'100%':'75%',border:HandleFlag === 2?'none':''}">
            <div class="QuanXuanBox" v-if="HandleFlag === 2">
               <div class="QuanXuanBtn">
                <div style="margin-right: 20px;cursor: pointer;" @click="AllCheck">
                    <Checkbox class="checkbox" v-model:checked="AllChecked"></Checkbox>
                    <span style="margin-left: 5px;" >全选</span>
                </div>
               </div>
               <div class="EditRight">
                <div  class="DelAndBack"  @click="DelHandle">
                    <img style="width: 14px;height: 14px;" src="~@/assets/images/schedule/shanchu.png" alt="">
                    <span style="margin-left: 5px;color: #ADD5FF;">删除</span>
                </div>
                <div class="DelAndBack">
                    <img style="width: 14px;height: 14px;" src="~@/assets/images/schedule/fanhui.png" alt="">
                    <span style="margin-left: 5px;cursor: pointer;color: #ADD5FF;" @click="HandleFlag = 1" >返回</span>
                </div>
               </div>
            </div>
            <div class="RightLeftBox">
                <p class="CurrentDate">
                    <span v-if="HandleFlag === 2" style="margin-right: 5px;" >创建于</span>
                <span style="margin-right: 15px;">{{ DateChange }}</span>
                <span style="margin-right: 15px;" v-if="HandleFlag === 1">{{ CheseDate }}</span>
                <span v-if="HandleFlag === 1">周{{ WeekNum }}</span>
             </p>
             <div class="RightRightBox" v-if="HandleFlag === 1">
                <div class="Tianjia"   @click="onAdd()">
                    <img  style="width: 14px;height: 14px;"  src="~@/assets/images/schedule/tianjia.png" alt="">
                    <span style="margin-left: 5px;color: #ADD5FF ;" >添加</span>
                </div>
                <div v-if="DataList.length" class="Tianjia" @click="onEdit()">
                    <img  style="width: 14px;height: 14px;"  src="~@/assets/images/schedule/bianji.png" alt="">
                    <span style="margin-left: 5px;color: #ADD5FF ;">编辑</span>
                </div>
             </div>
            </div>
           <div class="MsgBox">
              <ul class="MsgUl" v-if="DataList.length">
                 <li v-for="item in DataList" :key="item.id" :style="{border:HandleFlag === 1?'none':''}">
                     <div class="LiLeft" :style="{width:HandleFlag === 1?'100%': '70%'}">
                        <div class="yuan" :style="{display: HandleFlag === 2?'none':'block'}">
                            <div class="YuanDot" :class="'ActiveColor' + item.type"></div>
                        </div>
                        <Checkbox class="checkbox" v-model:checked="item.check" :class="HandleFlag === 1 ?'Noshow':''" @change="checkedChange()"></Checkbox>
                        <div class="msg">
                            <div class="TimeAndGq">
                                <span class="time">{{ item.createTime.slice(11,16) }}</span>
                                <p class="GuoQi" v-if="item.status === 1?true:false">已过期</p>
                            </div>
                            <div class="TiXing"  :class="HandleFlag === 1 ?'Noshow':''">
                                <!-- typeBoxLast ReturnColor-->
                                 <div class="typeBox " :class="[HandleFlag === 1 ?'Noshow':'']"
                                  v-for="(type,index) in item.warnTypeArr" :key="index" :style="{color:ReturnColor(type),borderColor:ReturnColor(type) }">{{ type }}</div>
                            </div>
                            <p>{{ item.connect }}</p>
                        </div>
                     </div>
                     <div class="LiRight" v-if="HandleFlag === 2">
                         <div class="CJtime">{{ item.startTime  }} ~ {{ item.endTime }}</div>
                         <div class="EditBtn" @click="EditItem(item)">
                              <div>编辑</div>
                         </div>
                     </div>
                 </li>
              </ul>
              <div v-else class="flex flex-col items-center" >
                <SvgIcon name="empty" class="w-14 h-14" />
                <span>暂无数据</span>
            </div>
           </div>
        </div>
    </div>
 </div>
 <FormModal :items="items"> </FormModal>
</template>
<script setup lang="tsx">
import { ref, reactive,watch,computed, onMounted, nextTick } from 'vue'
import { useFormModal } from '@/hooks/formModal';
import { ProFormProps } from '@/components/ProForm';
import { Calendar,InputPassword,DatePicker,Checkbox, Modal, message, Badge,   } from "ant-design-vue";
import SvgIcon from '@/components/SvgIcons/Index.vue';
import { listToEnum, listToOption } from '@/utils/utils';
import moment from 'moment';
import {reqScheduleManagementAdd,reqScheduleManagementDay, reqScheduleManagementUpdate, reqScheduleManagementDel,reqScheduleManagementDot} from '@/api/device'
import {
    CalendarOutlined,
    PlusOutlined,
    FormOutlined,
    PlusSquareOutlined,
    MinusSquareOutlined,
    LeftOutlined,
} from '@ant-design/icons-vue';
import { Dayjs } from 'dayjs';
import { toNumber } from 'lodash-es';
const props = defineProps({
 pageData: {
     type: Object,
  },
});
console.log('props值', props.pageData);
const CurrentTime = ref('')
const NameRef = ref('-1')
const value = ref<Dayjs>();

const DataList = ref([] as any)

// 请求按天查询列表数据
const getScheduleManagementDay = async(data:any) => {
    const res = await reqScheduleManagementDay(data)
    if(res.code === 200){
        console.log('列表数据',res);
        await  TimeChange()
        DataList.value = res.data || []
        DataList.value.forEach((item:any)=>{
            item.check = false
            item.warnTypeArr = []
            if(item.warnType.length){
                item.warnType = item.warnType.split(',')
                console.log('item.warnType', item.warnType);
                item.warnType.forEach((k:any)=>{
                    let typevalue
                     if(k === '0'){
                        typevalue = '5分钟前'
                    }else if(k === '1'){
                        typevalue = '15分钟前'
                    }else if(k === '2'){
                        typevalue = '1小时前'
                    }else if(k === '3'){
                        typevalue = '1天前'
                    }
                    item.warnTypeArr.push('提前' + typevalue + '提醒')
                })
            }
            if(item.repeatType === 0){
                item.warnTypeArr.push('不重复')
            }else if(item.repeatType === 1){
                item.warnTypeArr.push('按天重复')
            }else if(item.repeatType === 2){
                item.warnTypeArr.push('按周重复')
            }else if(item.repeatType === 3){
                item.warnTypeArr.push('按月重复')
            }else if(item.repeatType === 4){
                item.warnTypeArr.push('按年重复')
            }

            if(item.type === 0){
                item.warnTypeArr.push('会议')
            }else if(item.type === 1){
                item.warnTypeArr.push('文档')
            }else if(item.type === 2){
                item.warnTypeArr.push('日程计划')
            }
        })
        console.log(' DataList.value',  DataList.value);

    }
}

// 查询点位时间变化
const  TimeChange = async() => {
       let CurrentMonth
        CurrentMonth = CurrentTime.value.slice(5,7)
        CurrentMonth = toNumber(CurrentMonth)
        let obj = {} as any
        if( 1 < CurrentMonth && CurrentMonth < 10){
            // 23456789
              obj = {
                startTime:  CurrentTime.value.slice(0,4) + '-' + '0' + (CurrentMonth - 1 ) + '-' + '01',
                endTime: CurrentTime.value.slice(0,4) + '-' + '0' + (CurrentMonth + 1 ) + '-' + '31',
                code: props.pageData?.code,
                type: NameRef.value
             }
        }else if(CurrentMonth === 10){
            // 10
            obj = {
                startTime:  CurrentTime.value.slice(0,4) + '-' + '0' + (CurrentMonth - 1 ) + '-' + '01',
                endTime: CurrentTime.value.slice(0,4) + '-'  + (CurrentMonth + 1 ) + '-' + '31',
                code: props.pageData?.code,
                type: NameRef.value
             }
        } else if(CurrentMonth === 11){
            // 11
            obj = {
                startTime:  CurrentTime.value.slice(0,4) + '-'  + (CurrentMonth - 1 ) + '-' + '01',
                endTime: CurrentTime.value.slice(0,4) + '-'  + (CurrentMonth + 1 ) + '-' + '31',
                code: props.pageData?.code,
                type: NameRef.value
             }
        }else if(CurrentMonth === 12){
            // 12
            obj = {
                startTime:  CurrentTime.value.slice(0,4) + '-'  + (CurrentMonth - 1 ) + '-' + '01',
                endTime: CurrentTime.value.slice(0,4) + '-'  + (CurrentMonth) + '-' + '31',
                code: props.pageData?.code,
                type: NameRef.value
             }
        }else if(CurrentMonth === 1){
            obj = {
                startTime:  CurrentTime.value.slice(0,4) + '-' + '0' + (CurrentMonth) + '-' + '01',
                endTime: CurrentTime.value.slice(0,4) + '-' + '0' +  + (CurrentMonth) + '-' + '31',
                code: props.pageData?.code,
                type: NameRef.value
             }
        }
    await getScheduleManagementDot(obj)
}

onMounted(async()=>{
    CurrentTime.value = moment().format('YYYY-MM-DD')
    await getScheduleManagementDay({
        startTime: CurrentTime.value,
        code:props.pageData?.code,
        type: NameRef.value
    })
})

const DateChange = ref('')
const WeekNum = ref('')
const CheseDate = ref('')
watch(()=>CurrentTime.value,async(val:string)=>{
    // console.log('val', val);
    DateChange.value = val.slice(0,4) + '-' + val.slice(5,7) + '-' + val.slice(8,val.length)
    const MonthList = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
    const DayList = ['一','二','三','四','五','六','七','八','九','十',
        '十一','十二','十三','十四','十五','十六','十七','十八','十九','二十',
        '二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十',
        '三十一'
    ]
    let monthnum = toNumber(val.slice(5,7)) - 1
    let daynum = toNumber(val.slice(8,val.length)) - 1
    CheseDate.value = MonthList[monthnum] + DayList[daynum]

    const week =  moment(val).isoWeekday()
    switch (week) {
        case 1:
        WeekNum.value = '一'
            break;
        case 2:
        WeekNum.value = '二'
            break;
        case 3:
        WeekNum.value = '三'
            break;
        case 4:
        WeekNum.value = '四'
            break;
        case 5:
        WeekNum.value = '五'
            break;
        case 6:
        WeekNum.value = '六'
            break;
        case 7:
        WeekNum.value = '日'
            break;

        default:
            break;
    }
})

watch(()=>value.value,async(e:any)=>{
    console.log('e',e);
    let month = e.$M
    month = month + 1
    if(month < 10){
        month = "0" + month
    }
    let day =  e.$D
    if(day < 10){
        day = "0" + day
    }
    CurrentTime.value = e.$y + '-' + month + '-' + day
    // console.log('CurrentTime.value', CurrentTime.value);
    await getScheduleManagementDay({
        startTime:CurrentTime.value,
        code:props.pageData?.code,
        type: NameRef.value
    })
})

const  scheduleList = ref([
    {
        name: '全部日程',
        id: '-1'
    },
    {
        name: '会议',
        id: '0'
    },
    {
        name: '文档',
        id: '1'
    },
    {
        name: '日程计划',
        id: '2'
    },
])






const ChangeCurrent = async(val:string) => {
    NameRef.value = val
    await getScheduleManagementDay({
        startTime:CurrentTime.value,
        code:props.pageData?.code,
        type: val
    })
}

const warnTypeArr = [
        {
            id: '0',
            name: '提前5分钟'
        },
        {
            id: '1',
            name: '提前15分钟'
        },
        {
            id: '2',
            name: '提前1小时'
        },
        {
            id: '3',
            name: '提前1天'
        },
     ]

     const reminderMethodSelect = [
        {
            id: 0,
            name: '通知提醒'
        },
        {
            id: 2,
            name: '弹窗提醒'
        },
        {
            id: 3,
            name: '通知提醒+声音'
        },
        {
            id: 4,
            name: '弹窗提醒+声音'
        },
     ]
     const repeatTypeSelect =  [
        {
            id: 0,
            name: '不重复'
        },
        {
            id: 4,
            name: '按年重复(每一年的此日提醒)'
        },
        {
            id: 3,
            name: '按月重复(每一月的此日提醒)'
        },
        {
            id: 2,
            name: '按周重复(每一周的此星期提醒)'
        },
        {
            id: 1,
            name: '按天重复'
        },
     ]
     const typeSelect = [
        {
            id: 2,
            name: '日常计划'
        },
        {
            id: 0,
            name: '会议'
        },
        {
            id: 1,
            name: '文档'
        },
     ]
const items = computed<ProFormProps['items']>(() => [
  {
    label: '内容',
    type: 'textarea',
    field: 'connect',
    rules: [
      {
        required: true,
        message: '请输入',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入内容',
    },
  },
{
    label: '开始',
    type: 'date',
    field: 'startTime',
    rules:[{ required: true, message: '请选择开始时间' }],
    customRender(state) {
        const style = {
        width: '100%',
      };
      return( <DatePicker
        style={style}
         v-model:value={state.startTime}
        show-time={true}
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder='请选择时间'
        />)

    },

  },
{
    label: '结束',
    type: 'date',
    field: 'endTime',
    rules:[{ required: true, message: '请选择结束时间' }],
    customRender(state) {
        const style = {
        width: '100%',
      };
      return( <DatePicker
        style={style}
         v-model:value={state.endTime}
        show-time={true}
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        placeholder='请选择时间'
        />)
    },

  },
  {
    label: '提醒',
    type: 'select',
    field: 'warnType',
    rules: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请选择',
      mode: 'multiple',
      options: listToOption(
        warnTypeArr,
      'name',
      'id',
    ),
    },
  },
  {
    label: '提醒方式',
    type: 'select',
    field: 'reminderMethod',
    rules: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
    props: {
        placeholder: '请选择',
      options: listToOption(
        reminderMethodSelect,
      'name',
      'id',
    ),
    },
  },
  {
    label: '重复',
    type: 'select',
    field: 'repeatType',
    rules: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
    props: {
        placeholder: '请选择',
      options: listToOption(
        repeatTypeSelect,
      'name',
      'id',
    ),
    },
  },
  {
    label: '日程类型',
    type: 'select',
    field: 'type',
    rules: [
      {
        required: true,
        message: '请选择',
        trigger: 'blur',
      },
    ],
    props: {
        placeholder: '请选择',
      options: listToOption(
        typeSelect,
      'name',
      'id',
    ),
    },
  },
]);
const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
  formProps: { labelCol: { span: 3 } },
});


const HandleFlag = ref(1)

// 请求新增
const getScheduleManagementAdd = async(data:any) => {
    const res = await reqScheduleManagementAdd(data)
    if(res.code === 200){
        // console.log('res新增',res);
    }
}
// 请求修改
const getScheduleManagementUpdate = async(data:any) => {
    const res = await reqScheduleManagementUpdate(data)
    if(res.code === 200){
        // console.log('res修改',res);
    }
}

// 新增
const onAdd = () => {
  HandleFlag.value = 1
  open({
    title: '新增日程',
    defaultValue: {},
    serviceApi: async (params: any): Promise<any> => {
        // console.log('params新增', params);
        let obj = {} as any
        obj = params
        obj.code =  props.pageData?.code
        obj.year = toNumber(obj.startTime.slice(0,4))
        obj.month = toNumber(obj.startTime.slice(5,7))
        obj.day = toNumber(obj.startTime.slice(8,10))
        obj.isRemind = true
        obj.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        obj.warnType = obj.warnType.toString()
        await getScheduleManagementAdd(obj);
    //   tableRef.value.refresh();
        await getScheduleManagementDay({
            startTime:CurrentTime.value,
            code:props.pageData?.code,
            type: NameRef.value
        })
    },
  });
};
// 编辑
const onEdit = () => {
    HandleFlag.value = 2
}



// 编辑其中一项
const EditItem = (val:any) => {
    console.log('val',val);
    open({
    title: '编辑日程',
    defaultValue: {
        connect: val.connect,
        startTime: val.startTime,
        endTime: val.endTime,
        warnType: val.warnType,
        reminderMethod: val.reminderMethod,
        repeatType: val.repeatType,
        type: val.type,
    },
    serviceApi: async (params: any): Promise<any> => {
       // console.log('params新增', params);
       let obj = {} as any
        obj = params
        obj.code =  props.pageData?.code
        obj.year = toNumber(obj.startTime.slice(0,4))
        obj.month = toNumber(obj.startTime.slice(5,7))
        obj.day = toNumber(obj.startTime.slice(8,10))
        obj.isRemind = true
        obj.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
        obj.warnType = obj.warnType.toString()
        obj.id = val.id
        await getScheduleManagementUpdate(obj);
    //   tableRef.value.refresh();
        await getScheduleManagementDay({
            startTime:CurrentTime.value,
            code:props.pageData?.code,
            type: NameRef.value
        })
    },
  });
}

const checkedChange = () => {
    const res =  DataList.value.every((item:any)=>{
        return item.check === true
    })
    if(res){
        AllChecked.value = true
    }else{
        AllChecked.value = false
    }
}

// 勾选/反选
const AllChecked = ref(false)
const AllCheck = () => {
    if(!AllChecked.value){
            DataList.value.forEach((item:any) => {
                item.check = true
        });
    }else{
        DataList.value.forEach((item:any) => {
                item.check = false
        });
    }
    AllChecked.value = !AllChecked.value
}


//  请求删除
const getScheduleManagementDel = async(data:any) => {
    const res = await reqScheduleManagementDel(data)
    if(res.code === 200){
        AllChecked.value = false
    }
}

// 删除
const DelHandle = async() => {
  const res = DataList.value.some((item:any)=>{
        return  item.check
  })
  if(res){
        Modal.confirm({
        title: '系统提示',
        centered: true,
        content: `是否确认删除勾选数据？`,
        onOk: async () => {
            const arr = [] as any
            DataList.value.forEach((item:any)=>{
                    if(item.check){
                        arr.push(item)
                    }
            })
            const params = {
                batch: arr,
                code: props.pageData?.code
            }
            params.batch.forEach((item:any)=>{
                item.warnType = item.warnType.toString()
            })
            await getScheduleManagementDel(params)
            await getScheduleManagementDay({
            startTime:CurrentTime.value,
            code:props.pageData?.code,
            type: NameRef.value
        })
        },
    });
  }else{
    message.warning('请勾选需要删除的数据');
  }

}


let PointList = [] as any
const CalendarShow = ref(true)
// 请求点信息
const getScheduleManagementDot = async(data:any) => {
    PointList = [] as any
    const res = await reqScheduleManagementDot(data)
    if(res.code === 200){
        // console.log('点信息',res.data);
        let arr = [] as any
        arr = res.data
        if(arr && arr.length > 0){
            arr.forEach((item:any)=>{
                PointList.push(item.time)
            })
            CalendarShow.value = false
            nextTick(()=>{
                CalendarShow.value = true
            })
        }
    }
}


    const GetDot = (value:any) => {
        // console.log('value', value);
        let month
        month = value.$M + 1
        if(month < 10){
            month = '0' + month
        }
         let day
        day = value.$D
        if(day < 10){
            day = '0' + day
        }
       const date = value.$y + '-' + month + '-' + day
      const res = PointList.some((item:any)=>{
            return  item === date
      })
      if(res){
        return true
      }else{
        return false
      }

    }


    const ReturnColor = (val:string) => {
        let color = ''
        if(val.includes('日程计划')){
            color = '#FFB56B'
        }else if(val.includes('文档')){
             color = '#6BFFCE'
        }else if(val.includes('会议')){
             color = '#66E5FF'
        }
        return color
    }
</script>
<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    .LeftBox{
        width: 23%;
        height: 100%;
        // border: 1px solid blue;
        .LeftTopBox{
            width: 100%;
            height: 100%;
            // border: 1px solid blue;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
                font-size: 16px;
            }
            .today{
                font-size: 12px;
                padding: 1px 12px;
                border: 1px solid #fff;
                border-radius: 10px;
            }
        }
        .LeftCenterBox{
            width: 100%;
            margin-top: 5%;
            // border: 1px solid red;
            border-radius:10px;
            overflow: hidden;
           .Calendar{
                :deep(.ant-picker-panel){
                    border-top: none;
                }
                :deep(.ant-picker-calendar-mode-switch){
                    display: none;
                }
                // :deep(.ant-picker-calendar-year-select){
                //     // transform: translateX(-50px);
                // }
                :deep(.ant-select-selector){
                    // transform: translateX(-50px);
                }
                :deep(.ant-select-selector){
                    background-color: rgba(85,83,85);
                    color: #fff;

                }
                :deep(.ant-picker-calendar-header){
                    background-color: rgba(85,83,85) ;

                }
                :deep(.ant-picker-body){
                    background-color: rgba(85,83,85);
                }
                :deep(th){
                    color: rgba(255,255,255,0.5);
                }
                :deep(.ant-picker-calendar-date-value){
                    color: #fff;
                }
                :deep(.ant-picker-cell-selected){
                    .ant-picker-cell-inner{
                        background-color: #81BFFF;
                        border-radius: 50%;
                        .ant-picker-calendar-date-value{
                            color: #fff;
                        }
                    }
                    .ant-picker-cell-inner::before{
                        border: transparent !important;
                    }
                }

           }
        }
        .ScheduleUl{
            width: 100%;
            margin-top: 10%;
            li{
                width: 100%;
                padding: 10px 0;
                padding-left: 10px;
                // border: 1px solid blue;
                // background-color: #333;
                font-size: 14px;
                // color: #0081FF;
                border-radius: 8px;
                margin: 5px;
                cursor: pointer;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .dian{
                    width: 8px;
                    height: 8px;
                    // background-color: red;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }
            .CurrentSchedule{
                color: #0081FF;
                background-color: rgba(255,255,255,0.12);
            }
        }
    }
    .RightBox{
        width: 75%;
        height: 60vh;
        // border: 1px solid yellow;
        border-left: 1px solid rgba(255,255,255,0.3);
        padding-left: 2%;
        .QuanXuanBox{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .QuanXuanBtn{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .checkbox{
                        margin-right:5px;
                        :deep(.ant-checkbox .ant-checkbox-inner){
                            background-color: transparent;
                        }
                    }
            }
            .EditRight{
                // border: 1px solid red;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .DelAndBack{
                    cursor: pointer;
                    margin-right: 20px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
            }
        }
        .RightLeftBox{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // border: 1px solid blue;
            // margin-bottom: 3%;
            .CurrentDate{
            font-size: 16px;
         }
         .RightRightBox{
            display: flex;
            .Tianjia{
                margin-right: 30px;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
            }
         }
        }
        .MsgBox{
            width: 100%;
            height: 95%;
            // border: 1px solid red;
            overflow-y: auto;
            .MsgUl{
                li{
                    width: 100%;
                    display: flex;
                    margin-top: 30px;
                    padding-bottom: 15px;
                    border-bottom: 1px solid rgba(255,255,255,0.3);
                    .LiLeft{
                        // width: 70%;
                        display: flex;
                        // border: 1px solid blue;
                        justify-content: flex-start;
                        align-items: flex-start;
                        .ActiveColor0{
                        background-color: #66E5FF;
                    }
                    .ActiveColor1{
                        background-color: #6BFFCE;
                    }
                    .ActiveColor2{
                        background-color: #FFB56B;
                    }
                    .Noshow{
                        display: none;
                    }
                    .yuan{
                         width: 5%;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                        .YuanDot{
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                        }
                    }
                    .checkbox{
                        margin-right:20px;
                        transform: translateY(3px);
                        :deep(.ant-checkbox .ant-checkbox-inner){
                            background-color: transparent;
                        }
                    }
                    .msg{
                        width: 100%;
                        // border: 1px solid red;
                        .TimeAndGq{
                            width: 100%;
                            display: flex;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;

                            .GuoQi{
                                margin-left: 40px;
                                padding: 0px 20px;
                                font-size: 12px;
                                border: 1px solid #fff;
                                background-color: rgba(134,142,150,0.5);
                                border-radius: 6px;
                            }
                        }
                        .TiXing{
                            margin-bottom: 20px;
                            display: flex;
                            flex-wrap: wrap;
                            .typeBox{
                                // border: 1px solid #fff;
                                margin-right: 10px;
                                margin-top: 10px;
                                padding: 0 10px;
                                border: 1px solid transparent;
                                background-color: rgba(255,255,255,0.2);
                            }
                        }
                    }
                    }
                    .LiRight{
                        width: 30%;
                        // border: 1px solid yellow;
                        display: flex;
                        .CJtime{
                            width: calc(100% - 50px);
                            height: 100%;
                        }
                        .EditBtn{
                            width: 50px;
                            height: 100%;
                            background-color: #4F6678;
                            color: #ADD5FF;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>